<template>
  <el-card>
    <el-row
      type="flex"
      justify="space-between"
      align="middle"
      style="
        border-bottom: 1px solid #999;
        padding-bottom: 10px;
        margin-bottom: 10px;
      "
    >
      <div>试卷名称:{{ paperInfo.paper_name }}</div>
      <el-button size="small" type="primary" @click="goBack"
        >返回列表</el-button
      >
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6"
        ><div>归属学科:{{ paperInfo.subject_name }}</div></el-col
      >
      <el-col :span="6"
        ><div>归属目录:{{ paperInfo.directory_name }}</div></el-col
      >
      <el-col :span="6"
        ><div>
          试卷状态:<el-tag
            size="mini"
            :type="paperInfo.show_state === 1 ? 'success' : 'info'"
            >{{ paperInfo.show_state === 1 ? "启用" : "禁用" }}</el-tag
          >
        </div></el-col
      >
      <el-col :span="6"
        ><div>
          试卷类型:{{ paperInfo.paper_type === 1 ? "模拟卷" : "真题卷" }}
        </div></el-col
      >
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6"
        ><div>
          试卷难度:{{
            paperInfo.difficulty === 1
              ? "简单"
              : paperInfo.difficulty === 2
              ? "中等"
              : "较难"
          }}
        </div></el-col
      >
      <el-col :span="6"
        ><div>试卷题型:{{ paperType }}</div></el-col
      >
      <el-col :span="6"
        ><div>试卷总分:{{ paperInfo.total_score }}</div></el-col
      >
      <el-col :span="6"
        ><div>及格分数:{{ paperInfo.pass_score }}</div></el-col
      >
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6"
        ><div>创建人: {{ paperInfo.create_name }}</div></el-col
      >
      <el-col :span="6"
        ><div>创建时间:{{ paperInfo.created_at | formatDate }}</div></el-col
      >
    </el-row>
    <el-divider />
    <el-row><h4>选题信息</h4></el-row>
    <el-table border :data="check_question_list">
      <el-table-column label="题型" width="150px" prop="name">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="选题信息">
        <template slot-scope="scope">
          <span>
            共<el-input
              :value="scope.row.num"
              style="width: 50px"
            />题,每题<el-input
              :value="scope.row.score"
              style="width: 50px"
            />分,已选题数:<a>{{ scope.row.num }}</a
            >题
            <el-button
              size="mini"
              type="success"
              @click="lookQuestion(scope.row.type)"
              >看题</el-button
            >
          </span>
        </template>
      </el-table-column>
    </el-table>
    <LookPaper ref="lookPaper" />
  </el-card>
</template>

<script>
import LookPaper from "./lookPaper.vue";
export default {
  name: "PaperInfo",
  components: {
    LookPaper,
  },
  data() {
    return {
      paperInfo: {},
      check_question_list: [],
      paperType: "",
    };
  },
  watch: {
    paperInfo: {
      handler(val) {
        this.check_question_list = JSON.parse(val.check_question_list);
        JSON.parse(val.check_question_list);
        JSON.parse(val.check_question_list).forEach((item) => {
          //   console.log(item)
          if (this.paperType === "") {
            this.paperType = item.name;
          } else {
            this.paperType = this.paperType + "," + item.name;
          }
        });
      },
      deep: true,
    },
  },
  methods: {
    goBack() {
      this.$emit("goback");
    },
    lookQuestion(type) {
      console.log(type);
      console.log(Array.from(this.paperInfo.question_data));
      if (type === 1) {
        this.$refs.lookPaper.dialogShow = true;
        const questionList = this.paperInfo.question_data.filter(
          (item) => item.quest_type === type
        );
        this.$refs.lookPaper.questionList = questionList;
        console.log(questionList);
      }
      if (type === 2) {
        this.$refs.lookPaper.dialogShow = true;
        const questionList = this.paperInfo.question_data.filter(
          (item) => item.quest_type === type
        );
        this.$refs.lookPaper.questionList = questionList;
        console.log(questionList);
      }
      if (type === 3) {
        this.$refs.lookPaper.dialogShow = true;
        const questionList = this.paperInfo.question_data.filter(
          (item) => item.quest_type === type
        );
        this.$refs.lookPaper.questionList = questionList;
        console.log(questionList);
      }
      if (type === 4) {
        this.$refs.lookPaper.dialogShow = true;
        const questionList = this.paperInfo.question_data.filter(
          (item) => item.quest_type === type
        );
        this.$refs.lookPaper.questionList = questionList;
        console.log(questionList);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .html_p {
  display: inline-block;
  p {
    margin: 0;
  }
}
</style>
